<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.content {
			/*			display: flex;*/
			margin: 0 auto;
			width: 600px;
			/*			height: 500px;*/
			border: 1px solid #000;

		}

		.begin {
			text-align: center;
			height: 50px;
			background: #ccc;
			border: 1px solid #000;
			line-height: 50px;
		}

		ul {
			display: flex;
			flex-wrap: wrap;
		}

		li {
			list-style: none;
		}

		ul li {
			width: 100px;
			height: 100px;
			border: 1px solid #000;
			box-sizing: border-box;
			line-height: 100px;
			text-align: center;
		}

		.active {
			background: red;
			color: #fff;
		}

		.left{
			position: absolute;
			left: 0;
			top: 50px;
		}
		.left p{
			width: 100px;
		}
	</style>
</head>

<body>
	<div class="content">
		<div class="begin">开始</div>
		<ul class="right">
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div class="left">
			<p>天选之子</p>
		</div>
	</div>

	<script type="text/javascript">
		let data = ["孙悟空", "唐僧", "猪八戒", "沙僧", "白龙马", "观音菩萨", "如来佛祖", "玉皇大帝", "太白金星", "牛魔王", "铁扇公主", "红孩儿", "二郎神", "哪吒", "托塔天王", "蜘蛛精", "白骨精", "金角大王", "银角大王"]
		let lis = document.getElementsByTagName('li')
		let begin = document.querySelector('.begin')
		let left = document.querySelector('.left')
		for (let i = 0; i < lis.length; i++) {
			lis[i].innerText = data[i]
		}
		let flag = false
		let time = null
		begin.onclick = function () {
			if (begin.innerText == '开始') {
				begin.innerText = '结束'
				if (flag) {				
					document.querySelector('.active').remove()
					lis[0].className = 'active'
					time = setInterval(function () {
						let num = Math.random() * data.length
						document.querySelector('.active').classList.remove('active')
						lis[parseInt(num)].className = 'active'
					}, 100)
				} else {
					time = setInterval(function () {
						let num = Math.random() * data.length
						document.querySelector('.active').classList.remove('active')
						lis[parseInt(num)].className = 'active'
					}, 100)
				}

			} else if (begin.innerText == '结束') {
				begin.innerText = '开始'
				clearInterval(time)
				let text = document.querySelector('.active').innerText				
				let index = data.indexOf(text)
				data.splice(index, 1)
				flag = true
				let p = document.createElement('p')
				p.innerText = text
				left.appendChild(p)
			}
		}
	</script>
</body>

</html>